<include file="public@header" />
<div class="inner-content">
    <div class="container">
        <include file="public@left" />
        <div class="content">
            <h2>{$article.post_title}</h2>
            <php>
                $before_content_hook_param=[ 'object_id'=>$article['id'], 'table_name'=>'portal_post', 'object_title'=>$article['post_title'],
                'user_id'=>$article['user_id'], 'url'=>cmf_url_encode('portal/Article/index',array('id'=>$article['id'],'cid'=>$category['id'])),
                'object'=>$article ];
            </php>
           
           
              <div class="predictor">
                    <p>You can quickly query the individual estimated volume under the name of the item, and you can also add more items to see the total volume of the items you need to carry.</p>
                    <h5>Instructions</h5>
                    <div class="clearfix">
                        <p>1. Moving the mouse over the related items will bring up the button to add/delete the item, and one item will be added/deleted at a time.
                                <br> 2. mouse moves to the upper left part of the relevant items to view the special description of the item.
                                The data below <br> 3. are compiled according to the specifications of common furniture, for reference only.
                                <br> 4. refresh or close this page will result in the missing data of the added items.
                        </p>
                        <div class="summary" style="margin-top: -30px;">
                            <div>Total number of items:
                                <span class="total_qty">0</span> 件</div>
                            <div>Total volume:
                                <span class="total_vol">0</span> 立方米</div>
                            <div>
                                <a target="_blank" class="btn orange" href="http://www.eanta365.com/portal/article/index.html?id=21">Go to inquire&gt;&gt;</a>
                            </div>
                        </div>
                    </div>
                    <div class="estimate">
                    <volist name="list" id="vo">
                        <h6>{$vo['name']}</h6>
                        <ul class="clearfix">
                         <volist name="$vo.info" id="info_vo">
                            <li tid="{$info_vo['id']}"  tname="{$info_vo['name']}"   tvolume="{$info_vo['volume']}" class="tv {$info_vo['id']}">
                                <a class="info" style="display:none;">0</a>
                                <a class="plus" style="display:none;">+</a>
                                <a class="minus" style="display:none;">-</a>
                                <img src="{:cmf_get_image_preview_url($info_vo['photo_urls'])}""><div>{$info_vo['name']}
                                    <i>≈{$info_vo['volume']}m³</i>
                                </div>
                            </li>
                         </volist>
                      </ul>
                    </volist>
                   </div>
                </div>


        </div>
    </div>
</div>
<script>
$(function(){
	
	/*
	var tv_count=[];
	var tv_sum=0;
	$(".tv").bind('click',function(){
		var index=tv_count.indexOf($(this).attr("tid"));
		if(index>-1){
			tv_count.splice(index,1)
		}else{
			tv_count.push($(this).attr("tid"));
		}
		//alert(tv_count);
		$(".total_qty").html(tv_count.length);
		for(j = 0; j < tv_count.length; j++) {
			 //alert(tv_count[j])  
			tv_sum+=parseFloat($("."+tv_count[j]+"").attr("tvolume"));
		} 
		$(".total_vol").html(parseFloat(tv_sum).toFixed(2));
		//alert(tv_sum);
		tv_sum=0;
		
	})
	*/
	$(".tv").hover(function(){
		$(this).find(".info,.plus,.minus").show();
	},function(){
		if($(this).find(".info").html()=='0'){
			$(this).find(".info").hide();
		}
		$(this).find(".plus,.minus").hide();
	})
	
	$(".plus").bind('click',function(){
		var infonum=parseInt($(this).parent("li").find(".info").html());
		$(this).parent("li").find(".info").html(infonum+1);
		var tvolume=parseFloat($(this).parent("li").attr("tvolume"));
		var tv_count=parseFloat((infonum+1)*tvolume).toFixed(2);
		
		var total_vol=parseFloat($(".total_vol").html() )+tvolume;
		$(".total_vol").html(parseFloat(total_vol).toFixed(2));
		
		var total_qty=parseInt( $(".total_qty").html() )+1;
		$(".total_qty").html(total_qty);
		
	})
	
	$(".minus").bind('click',function(){
		var infonum=parseInt($(this).parent("li").find(".info").html());
		var tvolume=parseFloat($(this).parent("li").attr("tvolume"));
		if(infonum<1){
			$(this).parent("li").find(".info").html(0);
		}else{
			$(this).parent("li").find(".info").html(infonum-1);
			var tv_count=parseFloat((infonum-1)*tvolume).toFixed(2);
			var total_qty=parseInt( $(".total_qty").html() )-1;
			$(".total_qty").html(total_qty);
			
			var total_vol=parseFloat($(".total_vol").html() )-tvolume;
			$(".total_vol").html(parseFloat(total_vol).toFixed(2));
		}
		
		
	})
})
</script>
<include file="public@foot" />